<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="content" style="height:150px;line-height:150px;
text-align:center; color: #fff;background-color:#ccc;
font-size:80px;"></div>

<script>

    let num = 1;
    let content = document.getElementById('content');
function count() {
        content.innerHTML = num++;
    };
 //防抖处理函数
//  非立即执行函数
//  function debounce(func,wait){
//     let timer;
//     return function(){
//         let context = this;
//         let args = arguments;

//         if (timer) clearTimeout(timer);
//        timer = setTimeout(() => {
//         func.apply(this, args)
//       }, wait)
//     }

//  }

 // 立即执行版
function debounce(func, wait) {
    let timer;
    return function() {
      let context = this; // 这边的 this 指向谁?
      console.log(this);
      let args = arguments; // arguments中存着e
 
      if (timer) clearTimeout(timer);
 
      let callNow = !timer;
 
      timer = setTimeout(() => {
        timer = null;
      }, wait)
 
      if (callNow) func.apply(context, args);
    }
}

 content.onmousemove = debounce(count,1000);

</script>
    
</body>
</html>